
<template>
    <div style="position: relative">
        <el-upload :action="url" :headers="myHeaders" class="upload-demo uploadBtn" :limit="1" accept=".mp4" :show-file-list="false" :on-success="handleSuccess" :file-list="fileList">
            <i class="el-icon-video-camera"></i>
        </el-upload>
        <div id="editor" ref="editor" style="min-height: 600px;"></div>
    </div>
    <!-- <div id="editor" ref="editor" style="min-height: 600px;"></div> -->
</template>


<script>
import E from 'wangeditor'
import {
  getToken
} from '@/utils/auth'
export default {
    name: 'WangEditor',
    props: {
        wangEditorContent: {
            type: String,
        },
        isClear: {
            type: Boolean,
            default: false
        },
        upload_config_id: {
            type: Number,
        }
    },
    data() {
        return {
            editor: "",
            fileList: [],
            url: '',
            myHeaders: null,
        }
    },
    watch: {
        isClear(val) {
            if (val) {
                this.editor.txt.clear()
            }
        }
    },
    methods: {
        handleSuccess(response, file, fileList) { // el-upload上传成功后的回调， 在这里获取视频路径后添加video标签到editor标签中
            this.fileList = []
            // console.log(response.url)
            this.wangEditorContent = this.wangEditorContent + `<p><video src="${response.url}" style="width:100%" controls autobuffer autoplay muted/><br></p>`
            // this.catchData(this.wangEditorContent)
            this.editor.txt.html(this.wangEditorContent)
        },
        async initEditor() { // wangeditor的配置选项。 不用原有的视频按钮
            // this.editor = new E('#editor') /* 括号里面的对应的是html里div的id */
            // this.editor.customConfig.menus = [
            //     'head', // 标题
            //     'bold', // 粗体
            //     'fontSize', // 字号
            //     'fontName', // 字体
            //     'italic', // 斜体
            //     'underline', // 下划线
            //     'strikeThrough', // 删除线
            //     'foreColor', // 文字颜色
            //     'backColor', // 背景颜色
            //     'link', // 插入链接
            //     'list', // 列表
            //     'justify', // 对齐方式
            //     'emoticon', // 表情
            //     'image', // 插入图片
            //     // 'video', // 插入视频
            //     'table', // 表格
            //     'undo', // 撤销
            //     'redo' // 重复

            // ]
            // this.editor.customConfig.uploadImgMaxLength = 1 // 限制一次最多上传 1 张图片 */
            // this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 //* 将图片大小限制为 3M 默认为5M /
            // this.editor.customConfig.uploadImgServer = '/Upload/upload'
            // //* 自定义图片和视频上传（支持跨域和非跨域上传，简单操作）*/
            // this.editor.customConfig.customUploadImg = async (files, insert) => { // 点击按钮的回调
            //     this.$api.file.upload(files[0]).then(res => { // 调用后台的图片上传方法， 获得图片的网络路径
            //         const data = res.data
            //         insert(data)
            //     })
            // }
            // this.editor.customConfig.onchange = (html) => {
            //     //* html 即变化之后的内容 */
            //     this.editorContent = html
            //     this.catchData(this.editorContent) // 把这个html通过catchData的方法传入父组件
            // }
            // this.editor.create() /* 创建编辑器 */
        }
    },
    mounted() {
        this.$nextTick(function () {
            const _this = this
            // _this.initEditor()
            this.editor = new E(this.$refs.editor)
            this.editor.config.uploadImgMaxLength = 1
            this.editor.config.uploadFileName = 'file'
            this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
            this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024
            this.editor.config.uploadImgServer = '#'
            this.editor.config.menus = [
                'head', // 标题
                'bold', // 粗体
                'fontSize', // 字号
                'fontName', // 字体
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                'list', // 列表
                'justify', // 对齐方式
                'emoticon', // 表情
                'image', // 插入图片
                // 'video', // 插入视频
                'table', // 表格
                'undo', // 撤销
                'redo' // 重复

            ]
            this.editor.create()
            if (_this.wangEditorContent) {
                this.editor.txt.html(_this.wangEditorContent)
            }
            this.editor.config.onchange = (html) => {
                _this.$emit('update:wangEditorContent', html)
            }

            this.editor.config.uploadImgHooks = {
                error: function (xhr, editor, resData) {
                    console.log('error', xhr, resData)
                },
                customInsert: function (insertImgFn, result) {
                    insertImgFn(result.data)
                }
            }

            this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
                let formdata = new FormData()
                formdata.append('file', resultFiles[0])
                formdata.append('edit', true)
                formdata.append('upload_config_id', _this.upload_config_id)
                _this.$api.post('/Upload/upload', formdata).then(res => {
                    insertImgFn(res.data)
                })
            }
            // 获取接口和token
            var userInfo = window.sessionStorage.getItem('Admin-Token')
            // var token = JSON.parse(userInfo).token
            // this.myHeaders = { 'Admin-Token': token }
            // const service = axios.create({
            //     baseURL: (process.env.NODE_ENV === 'production' ? location.origin + process.env.VUE_APP_BASE_API : process.env
            //         .VUE_APP_BASE_API) + '/admin',
            //     withCredentials: true, // send cookies when cross-domain requests
            //     timeout: 500000 // request timeout

            // })
            const baseUrl = (process.env.NODE_ENV !== 'production' ? process.env.VUE_APP_BASE_API : process.env
            .VUE_APP_BASE_API) + '/admin/Upload/upload'
            var Token = getToken()
            this.myHeaders = { 'Authorization': Token }
            this.url = baseUrl
        });
    }
}

</script>
<style lang="less" rel="stylesheet/scss">
.uploadBtn {
    position: absolute;
    left: 732px;
    /*left: 620px;*/
    top: 5px;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    z-index: 999;
}

.uploadBtn:hover {
    color: #000;
}

.w-e-text-container {
    height: 500px !important;
}

.w-e-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}
</style>
